<script setup lang="ts">
import type { QuestionGroupSettings } from '@/hooks/bank/useQuestionGroup'
import NumberInput from '@/components/common/NumberInput.vue'
import Select from '@/components/common/Select.vue'
import TextInput from '@/components/common/TextInput.vue'

interface Props {
  modelValue: QuestionGroupSettings
}

interface Emits {
  (e: 'update:modelValue', value: QuestionGroupSettings): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

function updateSetting<K extends keyof QuestionGroupSettings>(key: K, value: QuestionGroupSettings[K]) {
  emit('update:modelValue', {
    ...props.modelValue,
    [key]: value,
  })
}
</script>

<template>
  <div class="question-group-settings card-area">
    <div class="question-group-settings__header">
      <div class="question-group-settings__title">
        题组设定
      </div>
    </div>

    <div class="question-group-settings__content">
      <TextInput
        :model-value="modelValue.title"
        label="题组标题:"
        placeholder="请输入题组标题"
        @update:model-value="updateSetting('title', $event)"
      />
      <Select
        label="题库类型:"
        :model-value="modelValue.inClass"
        placeholder="请选择课内外"
        :options="[
          { label: '课内', value: 0 },
          { label: '课外', value: 1 },
        ]"
        @update:model-value="updateSetting('inClass', Number($event))"
      />
      <Select
        v-if="modelValue.inClass === 1"
        :model-value="modelValue.extracurricularType"
        label="课外类型:"
        :options="[
          { label: '请选择课外类型', value: '' },
          { label: '校本', value: '校本' },
          { label: '个人', value: '个人' },
        ]"
        @update:model-value="updateSetting('extracurricularType', $event.toString())"
      />

      <Select
        v-if="modelValue.inClass === 0"
        :model-value="modelValue.textbookType"
        label="教材类型:"
        :options="[
          { label: '请选择教材类型', value: '' },
          { label: '人教版', value: '人教版' },
          { label: '部编版', value: '部编版' },
        ]"
        @update:model-value="updateSetting('textbookType', $event.toString())"
      />

      <Select
        :model-value="modelValue.correspondingGrade"
        label="对应年级:"
        placeholder="请选择对应年级"
        :options="[
          { label: '一年级', value: '一年级' },
          { label: '二年级', value: '二年级' },
          { label: '三年级', value: '三年级' },
          { label: '四年级', value: '四年级' },
          { label: '五年级', value: '五年级' },
          { label: '六年级', value: '六年级' },
        ]"
        @update:model-value="updateSetting('correspondingGrade', $event.toString())"
      />

      <NumberInput
        :model-value="modelValue.estimatedTime"
        label="预估时长:"
        placeholder="请输入预估时长(分钟)"
        @update:model-value="(value) => updateSetting('estimatedTime', Number(value))"
      />

      <Select
        :model-value="modelValue.difficulty"
        label="难度系数:"
        placeholder="请选择难度系数"
        :options="[
          { label: '1星', value: 1 },
          { label: '2星', value: 2 },
          { label: '3星', value: 3 },
          { label: '4星', value: 4 },
          { label: '5星', value: 5 },
        ]"
        @update:model-value="(value) => updateSetting('difficulty', Number(value))"
      />
    </div>
  </div>
</template>

<style scoped>
.question-group-settings {
  padding: 12px 19px 20px 19px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.question-group-settings__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.question-group-settings__title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  padding-bottom: 8px;
}

.question-group-settings__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 14px;
}
</style>
